<template>
  <div class="formWidgetContainer">
    <div class="formWidgetContainer__formInfo" v-if="formStore.formConfig.id">
      <div class="formWidgetContainer__formInfo-name">
        {{ formStore.formConfig.name }}
      </div>
      <div class="formWidgetContainer__formInfo-description">
        {{ formStore.formConfig.description }}
      </div>
    </div>
    <el-form class="formWidgetContainer__form" :validate-on-rule-change="false">
      <div class="form-widget-list">
        <vue-draggable-next
          :list="formStore.questions"
          item-key="id"
          v-bind="{
            group: 'dragGroup',
            ghostClass: 'ghost',
          }"
          handle=".drag-handler"
          :component-data="{ name: 'fade' }"
          @add="onDragAdd"
          @update="onDragUpdate"
        >
          <template v-if="formStore.questions.length > 0">
            <div v-for="(question, index) in formStore.questions" :key="index">
              <template v-if="question.type === 'table'">
                <!-- 容器组件 -->
                <component
                  :is="getContainer(question.type)"
                  :field="question"
                  :key="question.id"
                  :index-of-parent-list="index"
                />
              </template>
              <template v-else>
                <!-- 基本组件 -->
                <component
                  :is="getWidget(question.type)"
                  :field="question"
                  :key="question.id"
                  :index-of-parent-list="index"
                />
              </template>
            </div>
          </template>
        </vue-draggable-next>
      </div>
    </el-form>
    <div
      class="formWidgetContainer__tips"
      v-if="formStore.questions.length <= 0"
    >
      1.拖拽组件到此区域
    </div>
  </div>
</template>

<script lang="ts" setup>
import { VueDraggableNext } from "vue-draggable-next";
import FieldComps from "./field-wdiget/index";
import ContainerComps from "./container-widget/index";
import { useFormStore } from "@bis/stores/form";
import { deepClone } from "@bis/utils/objectFun";
import { addQue, queSequence } from "../../utils";
import { ElMessage } from "element-plus";

const formStore = useFormStore();

const getWidget = (type) => {
  return FieldComps[`${type}-widget`];
};

const getContainer = (type) => {
  return ContainerComps[`${type}-widget`];
};

// 添加
const onDragAdd = async (evt: { [key: string]: any }) => {
  const newIndex = evt.newDraggableIndex;
  const _value = deepClone(evt.item._underlying_vm_);
  if (!formStore.formConfig.id) {
    formStore.questions.splice(newIndex, 1);
    return ElMessage.warning("请先选择表单");
  }
  const res = await addQue(_value, formStore);
  if (res.status) {
    formStore.questions[newIndex] = res.data;
    if (formStore.isDesigner) {
      formStore.questions[newIndex].disabled = true;
    }
    formStore.setSelectQuestion(formStore.questions[newIndex]);
    // 更改表单中的排序
    await queSequence(formStore);
  } else {
    formStore.questions.splice(newIndex, 1);
    return ElMessage.warning("请先选择表单");
  }
};

const onDragUpdate = () => {
  // 更改表单中的排序
  queSequence(formStore);
};

const onDragMove = () => {
  console.log("onDragMove");
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
